<template>
	<Popup
		title="捐赠案例模板"
		btnText="我也要捐赠"
		@clickBtn="$emit('nextStep')"
		@close="$emit('close')"
	>
		<div class="guide">
			<div
				class="desc"
				v-html="hint"
			/>
			<div class="imgs">
				<img
					v-for="src in imgs"
					:key="src"
					:src="src"
				>
			</div>
		</div>
	</Popup>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/share/20220311134819673-WechatIMG119 3.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/share/20220311134819673-WechatIMG119 2.png'
      ],
      hint: '这是之前用陪伴模块改造的大龙公仔，会讲故事、聊天。捐赠原因是家里玩具太多了。\n现在忍痛割爱给它找新主人。喜欢它的朋友请把它带回家！'
    }
  }
}
</script>

<style lang='scss' scoped>
.guide {
  width: 700px;
  padding: 0 65px;

  .desc {
    padding: 50px 0;
    line-height: 36px;
    color: #003e34;
    white-space: pre-line;
  }

  .imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;

    img {
      width: 100%;
    }
  }
}
</style>
